<template>
	<a-drawer
		:width="500"
		:title="title"
		:visible="visible"
		@close="onClose">
		<div class="drawer-content-box">
			<a-form-model :model="pileEntity" :rules="rules" ref="pileEntity" layout="vertical">
				<a-form-model-item label="充电桩品牌" prop="pileBrand">
					<a-input v-model="pileEntity.pileBrand" placeholder="请输入充电桩品牌"/>
				</a-form-model-item>
				<a-form-model-item label="充电桩名称" prop="pileName">
					<a-input v-model:value="pileEntity.pileName" placeholder="请输入充电桩名称"/>
				</a-form-model-item>
				<a-form-model-item label="桩体编号" prop="pileNumber">
					<a-input v-model:value="pileEntity.pileNumber" placeholder="请输入桩体编号"/>
				</a-form-model-item>
				<a-form-model-item label="充电功率" prop="chargePower">
					<a-input v-model:value="pileEntity.chargePower" placeholder="请输入充电功率"/>
				</a-form-model-item>
				<a-form-model-item label="充电桩类型" prop="type">
					<a-select placeholder="请选择充电桩类型" v-model:value="pileEntity.type">
						<a-select-option :value="1">国标</a-select-option>
						<a-select-option :value="2">非国标</a-select-option>
					</a-select>
				</a-form-model-item>
				<a-form-model-item label="充电速度" prop="speed">
					<a-select placeholder="充电速度" v-model:value="pileEntity.speed">
						<a-select-option :value="1">直流快充</a-select-option>
						<a-select-option :value="2">交流慢充</a-select-option>
						<a-select-option :value="3">综合电站</a-select-option>
					</a-select>
				</a-form-model-item>
				<a-form-model-item label="所属电站" prop="stationId">
					<a-select placeholder="所属电站" v-model:value="pileEntity.stationId">
						<a-select-option :value="station.id" v-for="station in stationEntities">{{station.stationName}}</a-select-option>
					</a-select>
				</a-form-model-item>
			</a-form-model>
		</div>
		<div class="drawer-footer-box">
			<a-button type="primary" @click="savePile('pileEntity')">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
import {api, post} from "@/api/api";

export default {
	name: "AddStation",
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			id: '',
			visible: false,
			pileEntity: {},
			stationEntities: [],
			rules: {
				pileBrand: [
					{required: true, message: "请填写充电桩品牌", trigger: "blur",},
					{max: 30, message: "充电桩品牌不能超过10字", trigger: "blur",},
				],
				pileName: [
					{required: true, message: "请填写充电桩名称", trigger: "blur",},
					{max: 30, message: "充电桩名称不能超过10字", trigger: "blur",},
				],
				pileNumber: [
					{required: true, message: "请填写桩体编号", trigger: ["blur", "change"],},
				],
				stationId: [
					{required: true, message: "请选择所属电站", trigger: ["blur", "change"],},
				],
			},
		}
	},
	methods: {
		show(id){
			if ( id ) {
				this.id = id
				// 编辑
				post(api.PileSingle, {id: id}).then(res=>{
					this.pileEntity = res.data.data
				})
			}
			this.visible = true
			post(api.StationEntities, {}).then(res=>{
				this.stationEntities = res.data.data
			})
		},
		// 保存电站信息
		savePile() {
			this.$refs.pileEntity.validate ( ( valid ) => {
				if ( valid ) {
					let requestApi = this.id ? api.UpdatePile : api.SavePile;
					post ( requestApi, this.pileEntity ).then ( ( res ) => {
						if ( res.data.code == "000000" ) {
							this.$message.success ( {
								content: `${this.id ? "修改" : "添加"}充电桩成功`,
							} );
							this.onClose()
							this.$emit('reloadList')
						} else {
							this.$message.error ( {
								content: res.data.message,
							} );
						}
					} ).catch ( ( err ) => {
						console.log ( err );
					} );
				} else {
					return this.$message.warning ( {
						content: "请填写完整信息",
					} );
				}
			} );
		},
		onClose() {
			this.$refs.pileEntity.resetFields ();
			this.visible = false
		},
	},
}
</script>

<style lang="less" scoped>
@import "../../../static/addStation";
</style>
